<template>
  <n-card :title="title" class="text-center h-full" :segmented="{ content: true }" size="small">
    <div v-if="!network">
      <n-tooltip :style="{ maxWidth: '250px',                                                            opacity: 0.9 }" trigger="hover">
        <template #trigger>
          <n-progress type="circle" :percentage="precent" :color="color" :indicator-text-color="color"
            :gap-degree="80" />
        </template>
        <!-- <pre>
          {{detail}}
        </pre> -->
        <div v-html="detail">

        </div>
      </n-tooltip>

      <div>
        {{ content }}
      </div>
    </div>
    <n-space vertical v-else>
      <div class="text-gray-400">上行速率</div>
      <div class="text-2xl text-green-400">23kb/s</div>
      <div class="text-gray-400">下行速率</div>
      <div class="text-2xl text-red-400">0kb/s</div>
    </n-space>
  </n-card>
</template>
<script setup lang="ts">
import { useThemeVars } from 'naive-ui'
import { computed, toRefs } from 'vue';
const themeVars = useThemeVars()
defineOptions({ name: 'infoCard' });
type Props = {
  network?: boolean,
  title: string,
  precent?: number,
  content?: string,
  detail?: string
}
const props = withDefaults(defineProps<Props>(), {
  precent: 0,
  detail: ""
})
const { precent } = toRefs(props)
const color = computed(() => {
  if (precent.value < 40) {
    return themeVars.value.successColor
  } else if (precent.value < 80) {
    return themeVars.value.infoColor
  } else if (precent.value < 90) {
    return themeVars.value.warningColor
  } else {
    return themeVars.value.errorColor
  }
})


</script>
<style scoped>

</style>